import React, {useEffect} from 'react'
import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
import NotFound from '@p/NotFound'
import Login from '@p/Login'
import Layout from '@/Layout'
import { useSelector } from 'react-redux'
import { isLogin } from '@u'

export default function AuthRoutes() {
  const location = useLocation();
  // 监听路由  即可自动更新路由
  const routes = useSelector(state => state.user.authRoutes)
  useEffect(() => {

  }, [location])
  return (
    <Routes>
      <Route path="/" element={
        isLogin()
        ?
        <Layout/>
        :
        <Navigate to='/login'/>
      }>
        {
          routes.map(route=> {
            return (
              <Route key={route.path} path={route.path} element={<route.element/>}/>
            )
          })
        }
        <Route path='/' element={<Navigate to='/dashBoard' replace/>}/>
      </Route>
      <Route path="/login" element={<Login/>}/>
      <Route path="*" element={<NotFound/>}/>
    </Routes>
  )
}
